<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>过渡</title>
		<style type="text/css">
			.box{
				width: 300px;
				height: 300px;
				background-color: skyblue;
				
				/* 过渡transition:过渡的属性，过度的时间，速度，延迟；
				ease:默认值，快慢
				linear:匀速
				ease-in:低速开始
				ease-out:低速结束
				ease-in-out:低速开始和结束
				*/
				/* transition: width 2s linear 1s;*/
				/* all:所有的 */
				transition: all 3s linear;
			}
			/* 鼠标悬停 */
			.box:hover{
				/* width: 800px; */
				/* height: 500px; */
				background-color: aquamarine;
				/* transform转换:
				 1.位移translate（x轴方向，y轴方向）/translatex（x轴方向）translatey(y轴方向)
				 位移的值可以是百分比，对应自身宽高的百分比。
				 2.缩放scale():倍数
				 */
				/* transform: translatey(-100px); */
				/* transform: scalex(.5); */
				/* transform: skewy(90deg); */
				/* 复合写法:
				 
				 */
				transform: translatey(-100px) scale(2) rotatey(-90deg);
				transform-origin: center;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>
